<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 10em;
			}
			
			.green::after{
				content: "";
				width: 40px;
				height: 40px;
				background-color: green;
				display: inline-block;
			}
			
			.yellow::after{
				content: "";
				width: 40px;
				height: 40px;
				background-color: yellow;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="green" style="width: 100px;height: 100px;background-color: red;"></div>
		<script type="text/javascript">
			var div = document.getElementsByTagName('div')[0];
			//div.style//展示行间的样式表，没有兼容性问题
			//float等js关键字前加css
			//float -->cssFloat
			//符合属性建议拆解
			
			
			//只有读取操作
			//window.getComputedStyle();//div,null
			//只读
			//IE8以及一下不兼容，没有相对值
			
			//IE8
			//ele.currentStyle();
			
			
			/*
			function getStyle(elem,prop){
				if(window.getComputedStyle){
					return window.getComputedStyle(elem,null)[prop];
				}else{
					reutrn ele.currentStyle()[prop]
				}
			}*/
			
			
			//伪元素
//			window.getComputedStyle(div,after);

			div.onclick = function(){
				div.className = "yellow";	
			}
			
			
			
		</script>
	</body>
</html>
